<template>
    <div class="pos-r" style="width: 145px; height: 145px;">
        <div>
            <img src="@/assets/images/controller_default_chassis.png" style="width: 145px; height: 145px;" />
        </div>

        <div class="pos-a" style="left: 50%; top: 50%; margin: -31px 0 0 -31px;">
            <img
                :src="resetUrl"
                style="width: 62px; height: 62px;"
                @mousedown="handleMousedownControl('reset')"
                @mouseup="handleMouseupControl('reset')"
            />
        </div>

        <!-- 上 -->
        <div class="pos-a" style="left: 28px; top: 5px;">
            <img
                :src="controlTopUrl"
                style="width: 90px; height: 40px;"
                @mousedown="handleMousedownControl('top')"
                @mouseup="handleMouseupControl('top')"
            />
        </div>

        <!-- 右 -->
        <div class="pos-a" style="right: 5px; top: 30px;">
            <img
                :src="controlRightUrl"
                style="width: 40px; height: 90px;"
                @mousedown="handleMousedownControl('right')"
                @mouseup="handleMouseupControl('right')"
            />
        </div>

        <!-- 下 -->
        <div class="pos-a" style="left: 28px; bottom: 5px;">
            <img
                :src="controlBottomUrl"
                style="width: 90px; height: 40px;"
                @mousedown="handleMousedownControl('bottom')"
                @mouseup="handleMouseupControl('bottom')"
            />
        </div>

        <!-- 左 -->
        <div class="pos-a" style="left: 5px; top: 28px;">
            <img
                :src="controlLeftUrl"
                style="width: 40px; height: 90px;"
                @mousedown="handleMousedownControl('left')"
                @mouseup="handleMouseupControl('left')"
            />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Control',

        data() {
            return {
                resetUrl: require('@/assets/images/controller_default_reset.png'), // 重置
                controlTopUrl: require('@/assets/images/controller_default_top.png'), // 上
                controlRightUrl: require('@/assets/images/controller_default_right.png'), // 右
                controlBottomUrl: require('@/assets/images/controller_default_bottom.png'), // 下
                controlLeftUrl: require('@/assets/images/controller_default_left.png'), // 左
            }
        },

        methods: {
            // 鼠标按下控制器按钮时的回调
            handleMousedownControl(type) {
                switch (type) {
                    case 'reset':
                        this.resetUrl = require('@/assets/images/controller_checked_reset.png')
                        break;
                    case 'top':
                        this.controlTopUrl = require('@/assets/images/controller_checked_top.png')
                        break;
                    case 'right':
                        this.controlRightUrl = require('@/assets/images/controller_checked_right.png')
                        break;
                    case 'bottom':
                        this.controlBottomUrl = require('@/assets/images/controller_checked_bottom.png')
                        break;
                    case 'left':
                        this.controlLeftUrl = require('@/assets/images/controller_checked_left.png')
                        break;
                    default:
                        break;
                }
            },

            // 鼠标抬起控制器按钮时的回调
            handleMouseupControl(type) {
                switch (type) {
                    case 'reset':
                        this.resetUrl = require('@/assets/images/controller_default_reset.png')
                        break;
                    case 'top':
                        this.controlTopUrl = require('@/assets/images/controller_default_top.png')
                        break;
                    case 'right':
                        this.controlRightUrl = require('@/assets/images/controller_default_right.png')
                        break;
                    case 'bottom':
                        this.controlBottomUrl = require('@/assets/images/controller_default_bottom.png')
                        break;
                    case 'left':
                        this.controlLeftUrl = require('@/assets/images/controller_default_left.png')
                        break;
                    default:
                        break;
                }
            },

        },

        props: {

        },
    }
</script>